<template>
	<div class="common-layout">
		<el-container id="parent-container">
			<el-header>
				<div>
					<el-icon style="font-size: 30px;margin-right: 8px;">
						<Phone />
					</el-icon>
					<h1>东软环保公众监督平台管理系统</h1>
				</div>
				<div>系统管理员：admin</div>
				<el-button type="danger" size="small" @click="signOut">
					Out&nbsp;&nbsp;
					<el-icon>
						<DarrowRight />
					</el-icon>
				</el-button>
			</el-header>
			<el-container>
				<el-aside width="200px" style="background-color: #79bbff;">
					<el-menu active-text-color="#ffd04b" background-color="#79bbff" class="el-menu-vertical-demo"
						text-color="#ffffff" default-active="1" router="main">
						<el-sub-menu index="1">
							<template #title>
								<el-icon>
									<ChatDotRound />
								</el-icon>
								<span>公众监督数据管理</span>
							</template>
							<el-menu-item index="/feedbackList">
								公众监督数据列表
							</el-menu-item>
							<el-menu-item index="/confirmAqi">
								确认AQI数据列表
							</el-menu-item>
						</el-sub-menu>
						<el-sub-menu index="2">
							<template #title>
								<el-icon>
									<DocumentCopy />
								</el-icon>
								<span>统计数据管理</span>
							</template>
							<el-menu-item>
								省分组检查统计
							</el-menu-item>
							<el-menu-item>
								AQI指数分布统计
							</el-menu-item>
							<el-menu-item>
								AQI指数趋势统计
							</el-menu-item>
							<el-menu-item>
								其他数据统计
							</el-menu-item>
						</el-sub-menu>
					</el-menu>
				</el-aside>
				<el-container>
					<el-main><router-view></router-view></el-main>
				</el-container>
			</el-container>

			<el-footer>&copy;版权所有 东软睿道 www.neusoft.com</el-footer>
		</el-container>
	</div>
</template>


<script setup>
	import {
		ref
	} from "vue";
	import {
		Phone,
		DArrowRight,
		ChatDotRound,
		DocumentCopy
	}
	from "@element-plus/icons-vue";
	import {
		useRouter
	} from "vue-router";
	const router = useRouter();
</script>

<style scoped>
	.el-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 0 0 60px;
		background-color: #409eef;
		color: #ffffff;
		user-select: none;
	}

	.el-header div {
		display: flex;
		align-items: center;
	}

	.el-header div h1 {
		font-weight: 500px;
		font-size: 24px;
		letter-spacing: 1px;
	}

	.el-header div p {
		font-size: 16px;
		margin-right: 30px;
	}

	.el-footer {
		text-align: center;
		line-height: 60px;
		font-size: 14px;
		color: #ffffff;
		flex: 0 0 60px;
		background-color: #409eef;
	}

	body {
		height: 100%;
	}

	.el-main {
		height: 80%;
	}

	#app {
		height: 100%;
	}

	.common-layout {
		height: 100%;
	}

	#parent-container {
		height: 100%
	}
</style>